<script lang="ts" setup>
import { onMounted, Ref, ref, watch } from "vue";
import * as echarts from "echarts";
import { useUserStore, useStuDataStore } from "@/store";

const userStore = useUserStore();

const stuDataForm = useStuDataStore();

let absPie_option = {
  title: {
    text: "请假情况",
    left: "center",
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "horizontal",
    left: "center",
    bottom: "bottom",
  },
  series: [
    {
      type: "pie",
      radius: "50%",
      labelLine: {
        show: false,
      },
      label: {
        show: false,
      },
      color: ["#73c0de", "#E8645A", "#9ACD32"],
      data: [
        { value: 0, name: "已申请" },
        { value: 0, name: "夜不归宿" },
        { value: 0, name: "已销假" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};

let caPie_option = {
  title: {
    text: "竞赛认定结果",
    left: "center",
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "horizontal",
    //想要水平的而不是垂直
    left: "center",
    bottom: "bottom",
  },
  series: [
    {
      type: "pie",
      radius: "50%",
      labelLine: {
        show: false,
      },
      label: {
        show: false,
      },
      color: ["#FFD700", "#B0E0E6", "#DDA15E"],
      data: [
        { value: 0, name: "国家级" },
        { value: 0, name: "省部级" },
        { value: 0, name: "校级" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};

let ppPie_option = {
  title: {
    text: "已认定论文专利软著",
    left: "center",
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "horizontal",
    left: "center",
    bottom: "bottom",
  },
  series: [
    {
      type: "pie",
      radius: "50%",
      labelLine: {
        show: false,
      },
      label: {
        show: false,
      },
      color: ["#fac858", "#ee6666", "#73c0de"],
      data: [
        { value: 0, name: "论文" },
        { value: 0, name: "专利" },
        { value: 0, name: "软著" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};

const getStuData = async () => {
  // console.log("学生数据", stuDataForm.value);
  if (stuDataForm.paperVO) {
    ppPie_option.series[0].data[0].value = stuDataForm.paperVO.paper;
    ppPie_option.series[0].data[1].value = stuDataForm.paperVO.software;
    ppPie_option.series[0].data[2].value = stuDataForm.paperVO.patent;
  }

  if (stuDataForm.cognizanceVO) {
    caPie_option.series[0].data[0].value = stuDataForm.cognizanceVO.national;
    caPie_option.series[0].data[1].value = stuDataForm.cognizanceVO.provincial;
    caPie_option.series[0].data[2].value = stuDataForm.cognizanceVO.school;
  }

  if (stuDataForm.leaveVO) {
    absPie_option.series[0].data[0].value = stuDataForm.leaveVO.leaving;
    absPie_option.series[0].data[1].value = stuDataForm.leaveVO.overnightStay;
    absPie_option.series[0].data[2].value = stuDataForm.leaveVO.verifiedReturn;
  }

  // console.log("caPie_option", caPie_option);
};

const caChartDom: Ref<HTMLElement | any> = ref(null);
const drawCaChart = async () => {
  const chart = echarts.init(caChartDom.value);
  // console.log("caPie_option1", caPie_option);
  chart.setOption(caPie_option);
  chart.resize();
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

const ppChartDom: Ref<HTMLElement | any> = ref(null);
const drawPpChart = async () => {
  const chart = echarts.init(ppChartDom.value);
  chart.setOption(ppPie_option);
  chart.resize();
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

const absChartDom: Ref<HTMLElement | any> = ref(null);
const drawAbsChart = async () => {
  const chart = echarts.init(absChartDom.value);
  chart.setOption(absPie_option);
  chart.resize();
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

onMounted(() => {
  getStuData();
  drawCaChart();
  drawPpChart();
  drawAbsChart();
});

watch(
  stuDataForm,
  (newData) => {
    updateChartData();
  },
  { deep: true }
);

const updateChartData = () => {
  const data = stuDataForm.stuDataForm;

  ppPie_option.series[0].data[0].value = data.paperVO.paper;
  ppPie_option.series[0].data[1].value = data.paperVO.software;
  ppPie_option.series[0].data[2].value = data.paperVO.patent;

  caPie_option.series[0].data[0].value = data.cognizanceVO.national;
  caPie_option.series[0].data[1].value = data.cognizanceVO.provincial;
  caPie_option.series[0].data[2].value = data.cognizanceVO.school;

  absPie_option.series[0].data[0].value = data.leaveVO.leaving;
  absPie_option.series[0].data[1].value = data.leaveVO.overnightStay;
  absPie_option.series[0].data[2].value = data.leaveVO.verifiedReturn;

  drawCaChart();
  drawPpChart();
  drawAbsChart();
};
</script>

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div ref="caChartDom" style="width: 100%; height: 300px"></div>
      </el-col>
      <el-col :span="8">
        <div ref="ppChartDom" style="width: 100%; height: 300px"></div>
      </el-col>
      <el-col :span="8">
        <div ref="absChartDom" style="width: 100%; height: 300px"></div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss"></style>
